import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image, Alert } from 'react-native';
import { orderBaseStyle } from '../../create/_common/style';
import { GLOBAL } from '../../../../config/global';
import { TitleCpt } from '../_components/TitleCpt';
import ToastUtil from '../../../../utils/toast';
import { FormItem } from '../../../../components/form/formItem'
let titleImgObj = require('../../../../imgs/global/query.png');
const scale = GLOBAL.SCALE;
export class PayCBlock extends Component {
	constructor(props) {
		super(props);
		let { initData, editData } = this.props.data || {};
		console.log('新增支付-模块', props)
		this.state = {
			initData: initData || {},
			editData: editData || {}
		}

		this.payTypeArr = []
	}
	componentWillReceiveProps (props) {
		let { initData, editData } = props.data || {};
		this._payTypeInit();
		this.setState({
			initData: initData || {},
			editData: editData || {}
		})
	}
	// 付款类型初始化
	_payTypeInit = () => {
		let { initData, editData } = this.state;
		let { payTypeData } = this.props.data.initData || {};
		let { sellData, buyData } = editData || {};
		let { tCode } = initData.orderFlag || {};
		let dictKey = sellData.payType;
		let dictKeyBuy = buyData.payType;
		if (tCode == 'C') {
			payTypeData.forEach((item, indexKey) => {
				if (item.dictKey == dictKey && item.comments) {
					this.payTypeArr = payTypeData[indexKey] && payTypeData[indexKey].comments ? eval(payTypeData[indexKey].comments) : [];
				}
			})
			sellData.payTypeArr = this.payTypeArr;
			this.payTypeArr.forEach((item) => {
				item.value = sellData[item.name];
			})

			let buyArr = [];
			payTypeData.forEach((item, indexKey) => {
				if (item.dictKey == dictKeyBuy && item.comments) {
					buyArr = payTypeData[indexKey] && payTypeData[indexKey].comments ? eval(payTypeData[indexKey].comments) : [];
				}
			})
			buyArr.forEach((item) => {
				item.value = buyData[item.name];
			})
			buyData.payTypeArr = buyArr;
		} else {
			payTypeData.forEach((item, indexKey) => {
				if (item.dictKey == dictKey && item.comments) {
					this.payTypeArr = payTypeData[indexKey] && payTypeData[indexKey].comments ? eval(payTypeData[indexKey].comments) : [];
				}
			})
			this.payTypeArr.forEach((item) => {
				item.value = sellData[item.name];
			})
		}
	}
	//点击更多
	_moreFn = () => {
		let { initData, editData } = this.state;
		let { navigation, payCallback } = this.props.data || {};
		navigation.navigate('PayPage', {
			initData,
			editData,
			callBack: (payData) => {
				payCallback && payCallback(payData)
			}
		});
	}

	//问号 功能在开发
	titleImgCallBack = () => {
		let { sellData } = this.props.data.editData || {};
		let { companyId, orderType } = sellData || {};
		let { navigation } = this.props.data;
		let lsTitle = orderType == 'P' ? '供应商' : '客户';
		let lsType = orderType == 'P' ? '保证金/定金、款到发货只' : '货到付款、票到付款';

		Alert.alert('提示', `${lsTitle}${lsType}有授信的企业才能选择该选项,可去申请企业授信`, [
			{
				text: '知道了',
			}, {
				text: '申请授信',
				onPress: () => {

					if (!companyId) {
						ToastUtil.showWarning('请先选择' + lsTitle);
						return
					}
					navigation.navigate('CreditFormPage', { companyId, orderType })
				}
			}
		])
	}


//1.判断是否有 资金 授信 字段
_isZjcbSx = (sellData) => {
	let result = false;
	let { payType ,orderType} = sellData;
	if ((orderType == "S" && (payType == '5' || payType == '3')) || (orderType == "P" && (payType == '2' || payType == '4'))) {
			result = true;
	}
	return result;
}

//3.资金 授信
_zjcbSx = (sellData) => {

	let { fundCreditFee, fundCreditInputFee ,orderType} = sellData || {};
	if (this._isZjcbSx(sellData)) {
			if (orderType == "S") {//销售转单 手动输入
					return <View>
							<FormItem  key={new Date().getTime()} keyboardType={'numeric'} handleCallBack={(text) => { this._writeCallBack({ name: 'fundCreditInputFee', value: text }) }} labelStyle={orderBaseStyle.labelStyle} required={true} sizeType={'small'} placeHolder={'请输入'} label={'资金(授信)'} value={fundCreditInputFee} rightText={'元/吨'} rightTextStyle={{ fontSize: 12 * scale, color: '#333' }} inputStyle={{ textAlign: 'center' }} type={'input'} />
							<FormItem key={new Date().getTime()+'te'} keyboardType={'numeric'} labelStyle={orderBaseStyle.labelStyle} required={true} sizeType={'small'} placeHolder={'公式'} label={'资金(授信)'} value={fundCreditFee} rightText={'元/吨'} rightTextStyle={{ fontSize: 12 * scale, color: '#333' }} inputStyle={{ textAlign: 'center' }} type={'input'} />
							</View>
			} else {
					return <FormItem editable={false} key={new Date().getTime()} iconText={`资金（授信）=加权平均单价*4.35%*${orderType == "S" ? '本单货到或票到天数' : '本单款到天数'}/365天`} keyboardType={'numeric'} handleCallBack={(text) => { this._writeCallBack({ name: 'fundCreditFee', value: text }) }} labelStyle={orderBaseStyle.labelStyle} required={true} sizeType={'small'} placeHolder={'公式'} label={'资金(授信)'} value={fundCreditFee} rightText={'元/吨'} rightTextStyle={{ fontSize: 12 * scale, color: '#333' }} inputStyle={{ textAlign: 'center' }} type={'input'} />
			}

	}
	return null;
}


	render () {
		let { editData, initData } = this.props.data || {};
		let { buyData, sellData } = editData || {};
		let { tCode, periodType } = initData.orderFlag || {};

		let TitleDataC = {  // 闭口
			title: '支付信息',
			moreText: !sellData.payType ? '新增' : '修改',
			_moreFn: () => { this._moreFn() },

		}
		let TitleDataE = {  // 长约
			title: '支付信息',
		}

		return (
			<View>
				{
					tCode == 'E' || tCode == 'QH' ?
						(
							<View style={orderBaseStyle.box}>
								<TitleCpt
									data={tCode == 'E' || tCode == 'QH' ? TitleDataE : TitleDataC} />
								<View style={[styles.row, { paddingTop: 15 * scale }]}>
									<View style={{ position: 'relative' }}>
										<Text style={orderBaseStyle.radioTitle} >{periodType == 'S' ? '收款类型' : '付款类型'}</Text>
										{tCode === 'QH' ? null : <TouchableOpacity onPress={this.titleImgCallBack} style={{ position: 'absolute', left: 25 * scale, top: 20 * scale }}><Image style={{ width: 15 * scale, height: 15 * scale }} source={titleImgObj}></Image></TouchableOpacity>}
									</View>
									<View style={styles.row}>
										<Text style={[styles.payTypeName, orderBaseStyle.activeFonts]}>{sellData.payTypeName}</Text><Text>丨</Text><Text style={orderBaseStyle.activeFonts}>{sellData.payStyleName}</Text>
									</View>
								</View>
								<View style={[styles.row, styles.paddingL20, { marginLeft: 90 * scale, width: 240 * scale, flexWrap: 'wrap', display: 'flex', flexDirection: 'row', }]}>
									{
										this.payTypeArr && this.payTypeArr.map((item, index) => {
											return (<View style={[styles.row,]} key={index}>{index != 0 ? (<Text style={orderBaseStyle.activeFonts}>丨</Text>) : null}<Text style={orderBaseStyle.activeFonts}>{item.title + item.value + item.text}</Text></View>)
										})
									}
								</View>
						{this._zjcbSx(sellData)}
							</View>
						)
						: (
							<View style={orderBaseStyle.box}>
								<TitleCpt
									data={tCode == 'E' || tCode == 'QH' ? TitleDataE : TitleDataC} />
								{
									!sellData.payType ? (<Text style={orderBaseStyle.notgood}>请添加支付信息...</Text>) : (
										<View style={orderBaseStyle.top10}>

											<View style={[styles.row, styles.paddingL20]}>
												<View style={[orderBaseStyle.goodsIconBox, orderBaseStyle.goodsBuy]}><Text style={[orderBaseStyle.goodsIcon]}>采</Text></View>
												<View style={orderBaseStyle.iconTop}>
													<View style={styles.row}>
														<Text style={[styles.payTypeName, orderBaseStyle.fontSize14]}>{buyData.payTypeName}</Text><Text style={orderBaseStyle.fontSize14}>丨</Text><Text style={orderBaseStyle.fontSize14}>{buyData.payStyleName}</Text>
													</View>
													<View style={styles.row}>
														{
															buyData.payTypeArr && buyData.payTypeArr.map((item, index) => {
																return (<View style={styles.row} key={index}>{index != 0 ? (<Text style={orderBaseStyle.fontSize14}>丨</Text>) : null}<Text style={orderBaseStyle.fontSize14}>{item.title + item.value + item.text}</Text></View>)
															})
														}
													</View>
												</View>
											</View>

											<View style={[styles.row, styles.paddingL20]}>
												<View style={[orderBaseStyle.goodsIconBox, orderBaseStyle.goodsSell]}><Text style={[orderBaseStyle.goodsIcon]}>销</Text></View>
												<View style={orderBaseStyle.iconTop}>
													<View style={styles.row}>
														<Text style={[styles.payTypeName, orderBaseStyle.fontSize14]}>{sellData.payTypeName}</Text>
														<Text style={orderBaseStyle.fontSize14}>丨</Text>
														<Text style={orderBaseStyle.fontSize14}>{sellData.payStyleName}</Text>
													</View>
													<View style={[styles.row]}>
														{
															sellData.payTypeArr && sellData.payTypeArr.map((item, index) => {
																return (<View style={styles.row} key={index}>{index != 0 ? (<Text style={orderBaseStyle.fontSize14}>丨</Text>) : null}<Text style={orderBaseStyle.fontSize14}>{item.title + item.value + item.text}</Text></View>)
															})
														}
													</View>
												</View>
											</View>

										</View>
									)
								}
							</View>
						)
				}
			</View >
		)
	}
}
const styles = StyleSheet.create({
	radioTitle: {
		fontSize: 14 * scale,
		color: '#333',
		paddingBottom: 15 * scale,
		paddingLeft: 10 * scale,
		paddingTop: 15 * scale
	},
	required: {
		fontSize: 14 * scale,
		color: '#D0021B'
	},
	row: {
		flexDirection: 'row',
	},
	paddingL20: {
		paddingLeft: 10 * scale,
		paddingBottom: 15 * scale
	},
	mt5: {
		marginTop: 2 * scale
	},
	payTypeName: {
		paddingBottom: 5 * scale
	}
})

